<template>
  <div class="main-wrapper">
    <Education :education="education" />

    <Work :workExperience="workExperience" />

    <Program />

    <Person :myGit="myGit" />

    <Skill :skills="skills" />

    <Introduce />

    <Awards :certificate="certificate" />

    <!-- <Goal /> -->

    <Thanks />
  </div>
</template>

<script>
import Education from './education'
import Work from './work'
import Program from './program'
import Person from './person'
import Skill from './skill'
import Awards from './awards'
import Introduce from './introduce'
// import Goal from './goal'
import Thanks from './thanks'

export default {
  name: 'main-wrap',
  components: {
    Education,
    Work,
    Program,
    Person,
    Skill,
    Awards,
    Introduce,
    // Goal,
    Thanks,
  },
  props: {
    education: {
      type: Array,
      default() {
        return []
      },
    },
    workExperience: {
      type: Array,
      default() {
        return []
      },
    },
    myGit: {
      type: Array,
      default() {
        return []
      },
    },
    skills: {
      type: Array,
      default() {
        return []
      },
    },
    certificate: {
      type: Array,
      default() {
        return []
      },
    },
  },
}
</script>

<style lang="stylus">
@import '~@/assets/style/mixin.styl';

.main-wrapper
  padding 20px
  background-color #fff
  overflow hidden
  position relative
  border-radius 0 3px 3px 0

  .hero-education
    .icon-peixunjiaoyu
      transformtranslateY(-2px)

  .hero-work
    dt
      .icon-gongzuoxinxi
        font-size 26px
        transformtranslateY(-1px)
        margin-right 7px

  .hero-program
    dt
      .icon-xiangmu
        font-size 20px
        margin-right 12px


  .hero-skill
    dt
      .icon-zhuanyezhishijineng
        font-weight normal
        margin-right 8px

  .hero-awards
    dt
      .icon-zhengshu-copy
        font-weight normal
        margin-right 8px

  .hero-intro
    dt
      .icon-qita
        font-weight normal
        margin-right 9px
        font-size 22px

  .hero-thanks
    dt
      .icon-ganxie
        transform translateY(-3px)

@media screen and (min-width: 1024px)
  .main-container
    .nav-wrap
      position fixed

</style>
